<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平堆叠柱状图</title>
    <script src="../../echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 1080px;height: 700px;"></div>
</body>
<script>
    let mychart = echarts.init(document.getElementById("main"))
    let option = {
        title:{
            text:"堆叠柱状图",
            left:"center"
        },
        tooltip:{
            trigger:"axis",
            axisPointer:{
                type:"shadow"
            }
        },
        grid:{
            top:"20%"
        },
        legend:{
            data:["A商城","B商城","C商城","D商城","E商城"],
            left:"right",
            orient:"vertical"
        },
        xAxis:{
            type:"value"
        },
        yAxis:{
            type:"category",
            data:["A产品","B产品","C产品","D产品","E产品","F产品","G产品"]
        },
        series:[
            {
                name:"A商城",
                data:[320,302,301,334,330,356,310],
                stack:"总量1",
                label:{
                    show:true,
                    position:"inside"
                },
                type:'bar'
            },
            {
                name:"B商城",
                data:[320,332,301,250,490,310,330],
                type:"bar",
                label:{
                    show:true,
                    position:"inside"
                },
                stack:"总量1"
            },
            {
                name:"C商城",
                data:[328,336,335,320,381,364,460],
                type:'bar',
                label:{
                    show:true,
                    position:'inside'
                },
                stack:"总量"
            },
            {
                name:"D商城",
                data:[328,336,321,322,301,364,460],
                type:'bar',
                label:{
                    show:true,
                    position:'inside'
                },
                stack:"总量"
            },
            {
                name:"E商城",
                data:[308,316,235,320,321,364,410],
                type:'bar',
                label:{
                    show:true,
                    position:'inside'
                },
                stack:"总量"
            }
        ]
    }
    mychart.setOption(option)
</script>
</html>